<template>
	<view :style="mix_diyStyle">
  <view
    class="card_main"
    :style="{
      backgroundImage: 'url(' + backgroundImg + ')',
      minHeight: screenHeight + 'px'
    }"
  >
    <view class="card_main_con">
     
      <view class="card_title bg_style"></view>
	  <view class="right_intro">
	    <view class="right_item" @click="open">{{ $L('活动详情') }}</view>
	  </view>
      <view class="card_table">
        <view
          class="card_table_con bg_style"
          :style="{ backgroundImage: 'url(' + imgUrl + 'card_bg_s.png)' }"
        >
          <view
            class="card_times"
            v-if="
              reactgetAcDetail.acState && reactgetAcDetail.acState.flag == 1
            "
            >{{ $L('剩余翻拍次数') }}：{{ myInt.remainNum }}</view
          >
          <view class="card_times" v-else>{{
            reactgetAcDetail.acState && reactgetAcDetail.acState.flag == 0
              ? `${reactgetAcDetail.startTime} ${$L('开始')}`
              : $L('活动已结束')
          }}</view>
          <view class="card_center">
            <cardTable
              @res="res"
              :userInt="myInt"
              ref="cardTable"
              :drawId="drawId"
            ></cardTable>
          </view>
          <!-- <view class="card_desc">{{'翻牌抽奖一次将使用10积分'}}</view> -->
        </view>
      </view>

      <view
        :class="[
          'self_info',
          lotDetail.integralUse > 0
            ? 'flex_row_between_center'
            : 'flex_row_center_center'
        ]"
      >
        <view class="info_btn" v-if="lotDetail.integralUse > 0"
          >{{ $L('我的积分') }}：{{ myInt.integral }}{{ $L('积分') }}</view
        >
        <view class="info_btn" @click="toRec">{{ $L('我的中奖记录') }}</view>
      </view>
      <view
        class="card_bot"
        v-if="reactgetAcDetail.acState && reactgetAcDetail.acState.flag == 1"
      >
        <view
          class="card_bot_con bg_style_cover"
          :style="{ backgroundImage: 'url(' + imgUrl + 'card_print_bg.png)' }"
        >
          <view class="roll_in_list flex_column_between_center">
            <view class="roll_title">{{ $L('中奖名单') }}</view>
            <view class="roll_swiper flex_row_center_center">
              <swiper
                :indicator-dots="false"
                :autoplay="true"
                :interval="5000"
                :duration="1000"
                :disable-touch="true"
                :vertical="true"
                circular
                @change="change"
                display-multiple-items="3"
              >
                <swiper-item v-for="(item, index) in lotList" :key="index">
                  <view
                    :class="{ roll_swiper_item: true, sel: index == current }"
                    >{{ $L('恭喜') }} {{ item.memberNameHide }} {{ $L('获得')
                    }}{{ item.prizeName }}</view
                  >
                </swiper-item>

                <block v-if="3 - lotList.length > 0">
                  <swiper-item v-for="i in 3 - lotList.length" :key="i"> </swiper-item>
                </block>
              </swiper>
            </view>
          </view>
        </view>
      </view>
    </view>

    <popInfo ref="popInfo" @revive="revive"></popInfo>
  </view>
	</view>
</template>

<script>
import { arrCom } from '@/utils/common.js'
import cardTable from './cardTable.vue'
import popInfo from '../component/popInfo.vue'
export default {
  components: {
    popInfo,
    cardTable
  },
  data() {
    return {
      imgUrl: getApp().globalData.imgUrl + 'lottery/',
      current: 0,
      lotList: [],
      lotResult: {},
      myInt: {},
      screenHeight: null,
      timer: null,
      isCreated: false
    }
  },
  props: {
    lotDetail: {
      type: Object
    },
    drawId: {
      type: Number
    }
  },
  inject: ['getAcDetail'],
  computed: {
    reactgetAcDetail() {
      return this.isCreated ? this.getAcDetail() : {}
    },
    backgroundImg() {
      if (this.isCreated) {
        let { backgroundImageUrl } = this.lotDetail
        return backgroundImageUrl
          ? backgroundImageUrl
          : this.imgUrl + 'card_lotte_bg.png'
      }
    }
  },
  created() {
    this.isCreated = true
    this.getlotRecAsync()
    this.getlotInt()
    this.screenHeight = uni.getSystemInfoSync().windowHeight
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    change(e) {
      this.current = e.detail.current + 1
    },
    open() {
      this.$refs.popInfo.open({}, 'acDetail')
    },
    openShare() {},
    res(seq, lotResult) {
      if (this.lotDetail.integralUse > 0)
        this.myInt.integral -= this.lotDetail.integralUse
      if (this.myInt.remainNum > 0) this.myInt.remainNum -= 1

      if (lotResult.prizeType == 1)
        this.myInt.integral += parseInt(lotResult.description)
      setTimeout(() => {
        this.$refs.popInfo.open(
          lotResult,
          lotResult.isPrize == 1 ? 'roll_on' : 'roll_off'
        )
      }, 500)
    },
    revive() {
      this.$refs.cardTable.showFlag = -1
    },

    async getlotRecAsync() {
      if (this.reactgetAcDetail.acState.flag != 1) {
        return
      }

      this.lotList = await this.getlotRec()
      this.timer = setInterval(async () => {
        let res = await this.getlotRec()
        if (res.length) {
          this.lotList.push(...arrCom(this.lotList, res, 'winId'))
        }
      }, 6000)
    },
    getlotRec() {
      return new Promise((resolve) => {
        this.$request({
          url: 'v3/promotion/front/draw/winList',
          data: {
            drawId: this.drawId
          }
        }).then((res) => {
          if ((res.state = 200)) {
            resolve(res.data)
          }
        })
      })
    },
    getlotInt() {
      this.$request({
        url: 'v3/promotion/front/draw/integral',
        data: {
          drawId: this.drawId
        }
      }).then((res) => {
        if ((res.state = 200)) {
          this.myInt = res.data
        }
      })
    },

    toRec() {
      this.$Router.push({
        path: '/standard/lottery/lotRec',
        query: { drawId: this.lotDetail.drawId }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
uni-swiper {
  display: block;
  height: 160rpx;
  width: 550rpx;
}

uni-swiper-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #ifdef MP */
swiper {
  width: 550rpx !important;
  height: 160rpx !important;
}
swiper-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* #endif */

.bg_style {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bg_style_cover {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card_main {
  margin: 0;
  /* #ifdef APP-PLUS */
  padding-top: calc(var(--status-bar-height) + 90rpx);
  /* #endif */
  /* #ifndef APP-PLUS */
  padding-top: 90rpx;
  /* #endif */
  padding-bottom: 20rpx;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  .card_main_con {
    margin-top: 66rpx;
    position: relative;
	padding-top: 1rpx;
  }
  .card_table {
    /* #ifdef APP-PLUS */
    margin-top: calc(14rpx + var(--status-bar-height));
    /* #endif */
    /* #ifndef APP-PLUS */
    margin-top: 14rpx;
    /* #endif */

    .card_table_con {
      height: 714rpx;
      width: 690rpx;
      margin: 0 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;
      .card_times {
        font-size: 28rpx;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #bf4001;
        text-align: center;
        height: 70rpx;
        line-height: 70rpx;
      }

      .card_center {
        width: 640rpx;
        height: 559rpx;
        display: flex;
        justify-content: center;
      }

      .card_desc {
        position: absolute;
        bottom: 30rpx;
        font-size: 22rpx;
        font-family: SourceHanSansCN;
        color: #bf4001;
        text-align: center;
        height: 50rpx;
        line-height: 50rpx;
      }
    }
  }

  .self_info {
    padding: 0 70rpx;
    .info_btn {
      font-size: 24rpx;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #ffffff;
      background: transparent;
      border: 1px solid #ffffff;
      border-radius: 25px;
      padding: 10rpx 20rpx;
    }
  }

  .card_title {
    padding: 0 40rpx;
    margin-top: 40rpx;
    height: 110rpx;
  }

  .right_intro {
    display: flex;
    justify-content: flex-end;
	margin-top: 20rpx;
    .right_item {
      width: 141rpx;
      height: 50rpx;
      background: #d14802;
      border-radius: 25rpx 0 0 25rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 26rpx;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: #ffffff;
    }
  }

  .card_bot {
    padding: 0 50rpx;
    margin-top: 20rpx;
    .card_bot_con {
      height: 260rpx;
      padding: 20rpx 0;
      position: relative;
    }

    .bot_instruct {
      padding: 0 72rpx;

      view:first-child {
        text-align: center;
        font-size: 26rpx;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #ab0100;
      }

      view:last-child {
        margin-top: 6rpx;
        font-size: 18rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #d13912;
      }
    }

    .roll_in_list {
      width: 100%;

      .roll_title {
        letter-spacing: 6px;
        text-align: center;
        font-size: 28rpx;
        font-family: zcoolqingkehuangyouti;
        font-weight: 600;
        color: #b31111;
        line-height: 32rpx;
      }

      .roll_swiper {
        margin-top: 20rpx;
        width: 550rpx;
      }

      .roll_swiper_item {
        text-align: center;
        font-size: 22rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #666666;

        &.sel {
          color: #b2260c;
          font-weight: 600;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
